import React, {useEffect, useState} from 'react';
import {
    Button,
    Dimensions,
    FlatList,
    Image,
    SafeAreaView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from 'react-native';
import {DOMAIN_URL, newsList} from "../../../util/api";
import {useNavigation} from "@react-navigation/native";
import {PAGENAME} from "../../../util/PageName";
import {style} from "../../../theme";

const {width, height} = Dimensions.get('screen');

const DATA = [
    {
        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
        title: 'First Item',
    },
    {
        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
        title: 'Second Item',
    },
    {
        id: '58694a0f-3da1-471f-bd96-145571e29d72',
        title: 'Third Item',
    },
];

const BranchScreen = (props: { navigation: any }) => {
    const [selectedId, setSelectedId] = useState(null);
    const [newsArr, setNewsArr] = useState([]);
    const navigation = useNavigation();
    // const {navigation} = this.props;
    useEffect(() => {
        const unsubscribe = navigation.addListener(
            'focus',
            payload => {
                getNewList();
            }
        );
        return () => {
            unsubscribe();
        };
    }, [navigation]);

    const getNewList = () => {
        newsList({}).then(res => {
            console.log(res.rows);
            setNewsArr(res.rows);
        })
    };
    const renderItem = ({item}) => {
        // const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';

        return (
            <Item
                item={item}
                onPress={() => setSelectedId(item.newsid)}
                // style={{backgroundColor}}
            />
        );
    };

    const Item = ({item, onPress, style}) => (
        <View style={styles.indexDataRow} key={'event:' + item}>
            <TouchableOpacity
                onPress={() => {
                    console.log('Pressed');
                    props.navigation.push(PAGENAME.BRANCH_DETAIL, {newsId: item.newsid});
                }}
                style={{flexDirection: 'row', alignItems: 'center'}}>
                <View style={{marginLeft: 4, justifyContent: 'space-between'}}>
                    <Text
                        numberOfLines={1}
                        ellipsizeMode={'tail'}>
                        {item.newscontent}
                    </Text>
                    <Text>{item.starttime}</Text>
                </View>
            </TouchableOpacity>
        </View>
    );
    const listHeader = ({item}) => {
        return (
            <View
                style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                }}>
                <Text>支部动态列表</Text>
                <Button
                    title={'新增动态'}
                    onPress={() => {
                        props.navigation.push(PAGENAME.BRANCH_ADD);
                    }}
                />
            </View>
        );
    };

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                data={newsArr}
                renderItem={renderItem}
                // ListHeaderComponent={listHeader}
                // ListFooterComponent={listHeader}
                keyExtractor={item => item.id}
                extraData={selectedId}
            />

            <View
                style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    marginVertical: 8,
                    marginHorizontal: 8,
                    position: 'absolute',
                    bottom: 0,
                    right: 0,
                    left: 0,
                    zIndex: 999,
                }}>
                <Text style={styles.title}></Text>
                <View>
                    <TouchableOpacity onPress={() => {
                        props.navigation.push(PAGENAME.BRANCH_ADD);
                    }}>
                        <Image source={require('../../../assets/images/icon/add.png')} style={style.buttonIcon}/>
                    </TouchableOpacity>
                </View>
            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // marginTop: StatusBar.currentHeight || 0,
        marginHorizontal: 8,
        marginTop: 8,
    },
    // item: {
    //   padding: 20,
    //   marginVertical: 8,
    //   marginHorizontal: 16,
    // },
    title: {
        fontSize: 32,
    },
    indexDataRow: {
        marginBottom: 8,
        flexDirection: 'row',
        borderStyle: 'solid',
        borderColor: '#000',
        borderWidth: 1,
        borderRadius: 4,
        padding: 8,
        backgroundColor: '#fff',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: width - 16,
        height: 48,

    },
});

export default BranchScreen;
